<template>
  <div class="alg-logs h-100P flex-column bg-gray">
    <query-container @search="handleSearch" @reset="handleReset">
      <el-form
        ref="form"
        :model="queryInfo"
        :rules="rules"
        label-suffix="："
        inline
        label-width="100px"
      >
        <el-form-item label="事件名称" prop="abilityTypeEnum">
          <el-select class="selector" v-model="queryInfo.abilityTypeEnum" clearable>
            <el-option value="all" label="全部"></el-option>
            <el-option
              v-for="algAbility in algAbilityList"
              :key="algAbility.id"
              :label="algAbility.name"
              :value="algAbility.abilityTypeEnum"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="事件区域" prop="algOriginEnum">
          <el-select class="selector" v-model="queryInfo.algOriginEnum" clearable>
            <el-option value="all" label="全部"></el-option>
            <el-option
              v-for="({name,id},index) in AllRegionList"
              :key="index"
              :value="id"
              :label="name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键词" prop="keyword">
          <el-input
            class="selector"
            v-model="queryInfo.keyword"
            placeholder="请输入事件编号"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
    </query-container>

    <div class="flex-sub flex-column bg-white pd-20 mg-top-10">
      <div class="summery flex mg-bottom-20 bg-white">
        <div class="align-center flex-sub">
          <div class="flex-sub justify-center align-center">
            <span class="name fz-14 mg-right-20">事件总数</span>
            <span class="value fz-24">{{ queryInfo.total }}</span>
          </div>
        </div>
        <div class="align-center flex-sub">
          <div class="flex-sub justify-center align-center">
            <span class="name fz-14 mg-right-20">已解决事件</span>
            <span class="value fz-24">{{ countSolveEvent }}</span>
          </div>
        </div>
        <div class="align-center flex-sub">
          <div class="flex-sub justify-center align-center">
            <span class="name fz-14 mg-right-20">待解决事件</span>
            <span class="value fz-24">{{ Math.max(queryInfo.total - countSolveEvent, 0) }}</span>
          </div>
        </div>
      </div>
      <div class="flex-sub">
        <el-table
          height="98%"
          v-loading="loading"
          header-cell-class-name="table-header-cell"
          header-row-class-name="table-header-row"
          :data="tableData"
        >
          <el-table-column label="事件编号" prop="id"></el-table-column>
          <el-table-column label="涉及算法" prop="abilityTypeName"></el-table-column>
          <el-table-column label="事件设备" prop="deviceName">
            <template slot-scope="{row}">
              <div v-if="row.deviceVo && row.deviceVo.remarkName">
                {{ row.deviceVo.remarkName }}
              </div>
              <div>{{ row.deviceNo }}</div>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime">
            <template slot-scope="{row}">
              <span>{{ row.createTime | dateTimeFormatter }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="{row}">
              <div class="justify-center">
                <el-button
                  type="text"
                  size="mini"
                  class="link-text fz-14"
                  :class="{'disabled':row.solve}"
                  @click="handleSolveAlgEvent(row)"
                  :disabled="row.solve"
                >
                  {{ row.solve ? '已解决' : '解决' }}
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  class="link-text fz-14"
                  @click="handleNavTo(row)"
                >
                  查看
                </el-button>
              </div>
            </template>
          </el-table-column>
          <template v-slot:empty>
            <img :src="emptyImage" alt="" />
          </template>
        </el-table>
      </div>
      <ImgViewer :visible.sync="imgViewerVisible" :value="imgViewerMsg" />
      <el-pagination
        hide-on-single-page
        background
        layout="prev, pager, next, total, jumper"
        :total="queryInfo.total"
        :page-size="queryInfo.pageSize"
        @current-change="handlePageNoChange"
      />
    </div>
  </div>
</template>
<script>
import QueryContainer from '@/components/query-container'
import { apiCountSolveEvent, apiFindEventPageByParam, apiSolveAlgEvent } from './api.js'
import { apiFindAlgAbility } from '../alg-market/api'
import ImgViewer from '../components/img-viewer'
import { AlgOriginEnum, RemindModeEnum } from '../consts'
import { MAX_INTEGER } from 'szlschiefdata/consts'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'AlgorithmLogs',
  components: { QueryContainer, ImgViewer },
  data() {
    return {
      loading: false,
      imgViewerVisible: false,
      tableData: [],
      queryInfo: {
        algOriginEnum: 'all',
        remindModeEnum: 'all',
        abilityTypeEnum: 'all',
        total: 0,
        pageSize: 14,
        pageNo: 1,
        keyword: '',
      },
      algAbilityList: [{ id: '', name: '' }],
      imgViewerMsg: {
        title: '',
        dateTime: '',
        fileId: '',
      },
      countSolveEvent: 0,
    }
  },
  created() {
    this.initPage()
  },
  computed: {
    ...mapState({
      AllRegionList: state => state.region.AllRegionList,
    }),
    rules() {
      return {}
    },
    algOrigin() {
      const toList = []
      for (const [key, value] of AlgOriginEnum) {
        toList.push({
          label: value,
          value: key,
        })
      }
      return toList
    },
    remindMode() {
      const toList = []
      for (const [key, value] of RemindModeEnum) {
        toList.push({
          label: value,
          value: key,
        })
      }
      return toList
    },
    RemindModeEnum() {
      return RemindModeEnum
    },
    emptyImage() {
      return `${this.$consts.OSS_STATIC_IMAGE_URL}/empty.png`
    },
  },

  methods: {
    ...mapActions('region', ['setAllRegionList']),
    initPage() {
      this.findAlgAbility()
      this.findEventPageByParam()
      if (!this.AllRegionList.length) {
        this.setAllRegionList()
      }
    },
    handleReset() {
      this.$refs.form.resetFields()
      this.handleSearch()
    },
    handleSearch() {
      this.findEventPageByParam()
    },
    handlePageNoChange(currentPage) {
      this.queryInfo.pageNo = currentPage
      this.findEventPageByParam()
    },
    handleCheck(row) {
      this.imgViewerMsg = {
        fileId: row.fileId,
        title: row.algAbilityName,
        dateTime: row.createTime,
      }
      this.imgViewerVisible = true
    },
    handleSolveAlgEvent(row) {
      this.$confirm(`确认处理事件\`${row.id}\`, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        apiSolveAlgEvent(row.id).then(() => {
          this.$message.success('事件处理成功')
          this.handleSearch()
        })
      })
    },
    async findEventPageByParam() {
      this.loading = true

      apiCountSolveEvent().then(response => {
        this.countSolveEvent = response
      })

      const formData = {}
      for (const key in this.queryInfo) {
        if (
          this.queryInfo[key] !== 'all' &&
          this.queryInfo[key] &&
          this.queryInfo[key].toString().length
        ) {
          formData[key] = this.queryInfo[key]
        }
      }
      const { records, pageNo, total } = await apiFindEventPageByParam(formData)
      this.tableData = records
      this.queryInfo.total = total
      this.queryInfo.pageNo = pageNo
      this.loading = false
    },
    async findAlgAbility() {
      this.algAbilityList = await apiFindAlgAbility({ pageNo: 1, pageSize: MAX_INTEGER })
    },
    handleNavTo(row, path = '/algorithm/alg-event') {
      this.$router.push({ path, query: { eventId: row.id } })
    },
  },
}
</script>
<style lang="scss" scoped>
.alg-logs {
  .link-text.disabled {
    color: #c0c4cc;
  }

  .selector {
    width: vw(350px);
  }

  .summery {
    height: 40px;
    border-radius: 4px;
    box-shadow: -1px 0 4px 0 rgba(29, 29, 29, 0.15);

    & > div {
      &:not(:last-child)::after {
        display: inline-block;
        width: 1px;
        height: 100%;
        background: linear-gradient(
          0deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(153, 153, 153, 0.5) 26%,
          rgba(153, 153, 153, 0.99) 53%,
          rgba(153, 153, 153, 0.44) 79%,
          #fff 100%
        );
        content: '';
      }
    }

    .value {
      color: #0084ee;
    }
  }
}
</style>
